<template>
  <div class="form-designer-container">
    <div class="toolbar">
      <!-- <el-button type="primary" size="small" @click="saveFormJsonToTemp"
        >保存表单JSON</el-button
      >
      <el-button type="success" size="small" @click="getFormJson"
        >获取表单JSON</el-button
      > -->
      <el-button type="warning" size="small" @click="saveAsTemplate"
        >保存为模板</el-button
      >
      <!-- <el-button type="info" size="small" @click="showTemplateDialog"
        >获取模板</el-button
      > -->
      <el-button type="primary" size="small" @click="previewForm"
        >预览表单</el-button
      >
      <el-button type="success" size="small" @click="showGenerateDialog"
        >生成页面</el-button
      >
      <el-button size="small" @click="clearDesigner">清空设计器</el-button>
    </div>

    <div class="designer-wrapper">
      <v-form-designer ref="vFormDesigner" :designer-config="designerConfig">
      </v-form-designer>
    </div>

    <!-- 模板选择对话框 -->
    <el-dialog
      title="获取模板"
      :visible.sync="templateDialogVisible"
      width="600px"
      @close="closeTemplateDialog"
    >
      <div class="template-content">
        <div class="template-select">
          <el-select
            v-model="selectedTemplate"
            placeholder="请选择模板"
            style="width: 100%"
            @change="onTemplateChange"
          >
            <el-option
              v-for="template in templateList"
              :key="template.id"
              :label="template.name"
              :value="template.id"
            >
              <span style="float: left">{{ template.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                {{ template.date }}
              </span>
            </el-option>
          </el-select>
        </div>

        <div class="template-actions" style="margin-top: 20px">
          <el-button
            type="primary"
            @click="loadTemplate"
            :disabled="!selectedTemplate"
          >
            加载模板
          </el-button>
          <el-button
            type="success"
            @click="copyJson"
            :disabled="!selectedTemplate"
          >
            复制JSON
          </el-button>
          <el-button
            type="danger"
            @click="deleteTemplate"
            :disabled="!selectedTemplate"
          >
            删除模板
          </el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 生成页面对话框 -->
    <el-dialog
      title="生成页面"
      :visible.sync="generateDialogVisible"
      width="500px"
      @close="closeGenerateDialog"
    >
      <el-form :model="generateForm" label-width="80px">
        <el-form-item label="路由名" required>
          <el-input
            v-model="generateForm.routeName"
            placeholder="请输入路由名称，如：user-form"
          ></el-input>
        </el-form-item>
        <el-form-item label="页面名" required>
          <el-input
            v-model="generateForm.pageName"
            placeholder="请输入页面名称，如：用户表单"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="generateForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入页面描述（可选）"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="generateDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="generatePage"
          :disabled="!generateForm.routeName || !generateForm.pageName"
        >
          确认生成
        </el-button>
      </div>
    </el-dialog>

    <!-- 预览弹窗 -->
    <el-dialog
      title="表单预览"
      :visible.sync="previewDialogVisible"
      width="80%"
      :before-close="closePreviewDialog"
    >
      <div class="preview-content">
        <div class="preview-form">
          <v-form-render
            :form-json="getCurrentFormJson()"
            :form-data="previewFormData"
            :option-data="{}"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closePreviewDialog">关闭</el-button>
        <el-button type="success" @click="submitPreviewForm"
          >提交表单</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "FormDesigner",
  data() {
    return {
      designerConfig: {
        // 设计器配置选项 - 隐藏main-header
        logoHeader: false,
        toolbarMaxWidth: 700,
        toolbarMinWidth: 300,
        presetCssCode: "",
        resetFormJson: false,
        // 确保设计器高度正确
        widgetFormHeight: "calc(100vh - 120px)",
        widgetConfigHeight: "calc(100vh - 120px)",
        // 优化中间区域宽度
        widgetFormWidth: "calc(100vw - 400px)",
      },
      // 模板相关数据
      templateDialogVisible: false,
      templateList: [],
      selectedTemplate: null,
      currentTemplateJson: null,
      // 生成页面相关数据
      generateDialogVisible: false,
      generateForm: {
        routeName: "",
        pageName: "",
        description: "",
      },
      // 编辑模式相关
      isEditMode: false,
      currentTemplateId: null,
      currentTemplateName: "",
      // 预览弹窗相关
      previewDialogVisible: false,
      previewFormData: {},
    };
  },
  methods: {
    init() {
      // 从localStorage加载之前保存的表单
      const savedForm = localStorage.getItem("vform-design");
      if (savedForm) {
        try {
          const formJson = JSON.parse(savedForm);
          this.$refs.vFormDesigner.setFormJson(formJson);
          // this.$message.success("已加载上次保存的表单");
        } catch (e) {
          console.error("加载保存的表单失败:", e);
          // 如果加载失败，加载空模板
          this.loadEmptyTemplate();
        }
      } else {
        // 如果没有保存的表单，加载空模板
        this.loadEmptyTemplate();
      }
    },
    // 保存表单JSON到临时存储
    saveFormJsonToTemp() {
      const formJson = this.$refs.vFormDesigner.getFormJson();
      console.log("表单JSON:", formJson);

      // 保存到localStorage
      localStorage.setItem("vform-design", JSON.stringify(formJson));

      // 通知父组件更新
      this.$emit("update-json", formJson);

      // this.$message.success("表单JSON已保存！");
    },

    // 获取表单JSON并打印
    getFormJson() {
      const formJson = this.$refs.vFormDesigner.getFormJson();
      console.log("表单JSON:", JSON.stringify(formJson, null, 2));
      // this.$message.info("表单JSON已输出到控制台");
    },

    // 更新页面数据
    async updatePageData(pageId, formJson) {
      try {
        const { updatePage } = await import("@/api");
        await updatePage(pageId, { formJson });

        // this.$message.success("页面更新成功！");
        // 跳转到页面列表页面
        this.$router.push("/pages");
      } catch (error) {
        console.error("更新页面失败:", error);
        this.$message.error("更新页面失败: " + error.message);
      }
    },

    // 保存为模板
    async saveAsTemplate() {
      const formJson = this.$refs.vFormDesigner.getFormJson();

      try {
        // 检查是否在编辑页面模式
        const urlParams = new URLSearchParams(window.location.search);
        const pageId = urlParams.get("pageId");

        if (pageId) {
          // 编辑页面模式：更新页面数据
          this.updatePageData(pageId, formJson);
          return;
        }

        // 模板模式：保存或更新模板
        let templateName = "";
        let templateId = "";

        if (this.isEditMode) {
          // 编辑模式：直接使用当前模板名称和ID
          templateName = this.currentTemplateName;
          templateId = this.currentTemplateId;
        } else {
          // 新建模式：弹出输入框让用户输入模板名称
          const result = await this.$prompt("请输入模板名称", "保存模板", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /\S+/,
            inputErrorMessage: "模板名称不能为空",
          });
          templateName = result.value;
          templateId = Date.now().toString();
        }

        if (templateName) {
          // 获取当前用户信息
          const currentUser = this.getCurrentUser();
          const currentTime = new Date().toISOString();

          // 获取现有模板列表
          let templates = JSON.parse(
            localStorage.getItem("vform-templates") || "[]"
          );

          if (this.isEditMode) {
            // 编辑模式：更新现有模板
            const templateIndex = templates.findIndex(
              (t) => t.id === templateId
            );
            if (templateIndex !== -1) {
              templates[templateIndex] = {
                ...templates[templateIndex],
                formJson: formJson,
                updateTime: currentTime,
              };

              // 保存到localStorage
              localStorage.setItem(
                "vform-templates",
                JSON.stringify(templates)
              );

              this.$message.success(`模板"${templateName}"更新成功！`);

              // 返回模板列表页面
              this.$router.push("/templates");
            } else {
              this.$message.error("模板不存在，更新失败！");
            }
          } else {
            // 新建模式：添加新模板
            const templateData = {
              id: templateId,
              templateName: templateName,
              creator: currentUser,
              createTime: currentTime,
              updateTime: currentTime,
              formJson: formJson,
            };

            // 添加新模板
            templates.push(templateData);

            // 保存到localStorage
            localStorage.setItem("vform-templates", JSON.stringify(templates));

            this.$message.success(`模板"${templateName}"保存成功！`);
          }

          // 通知父组件更新
          this.$emit("update-json", formJson);
        }
      } catch (error) {
        // 用户取消输入（仅在新建模式下）
        if (!this.isEditMode) {
          console.log("用户取消保存模板");
        } else {
          console.error("更新模板失败:", error);
          this.$message.error("更新模板失败：" + error.message);
        }
      }
    },

    // 获取当前用户信息
    getCurrentUser() {
      // 这里可以从localStorage、sessionStorage或全局状态管理中获取用户信息
      // 暂时使用模拟数据，实际项目中应该从用户认证系统获取
      const userInfo = localStorage.getItem("current-user");
      if (userInfo) {
        try {
          const user = JSON.parse(userInfo);
          return user.name || user.username || "未知用户";
        } catch (error) {
          console.error("解析用户信息失败:", error);
        }
      }

      // 如果没有用户信息，返回默认值
      return "系统用户";
    },

    // 加载空模板
    loadEmptyTemplate() {
      const emptyTemplate = {
        widgetList: [],
        formConfig: {
          modelName: "formData",
          refName: "vForm",
          rulesName: "rules",
          labelWidth: 100,
          labelPosition: "left",
          size: "",
          labelAlign: "label-left-align",
          cssCode: "",
          customClass: "",
          functions: "",
          layoutType: "PC",
          onFormCreated: "",
          onFormMounted: "",
          onFormDataChange: "",
        },
      };

      try {
        // 设置空模板到设计器
        this.$refs.vFormDesigner.setFormJson(emptyTemplate);

        // 重置编辑模式状态
        this.isEditMode = false;
        this.currentTemplateId = null;
        this.currentTemplateName = "";

        console.log("已加载空模板");
      } catch (error) {
        console.error("加载空模板失败:", error);
      }
    },

    // 根据页面ID加载页面数据
    async loadPageById(pageId) {
      try {
        const { getPageById } = await import("@/api");
        const page = await getPageById(pageId);

        if (!page) {
          this.$message.error("页面不存在");
          this.loadEmptyTemplate();
          return;
        }

        // 直接使用页面的formJson数据
        if (page.formJson) {
          this.$refs.vFormDesigner.setFormJson(page.formJson);
          // this.$message.success(`已加载页面: ${page.pageName}`);

          // 设置编辑模式状态
          this.isEditMode = true;
          this.currentTemplateId = pageId; // 使用页面ID作为当前编辑ID
          this.currentTemplateName = page.pageName;
        } else {
          this.$message.error("页面数据不完整，缺少表单JSON");
          this.loadEmptyTemplate();
        }
      } catch (error) {
        console.error("加载页面失败:", error);
        this.$message.error("加载页面失败");
        this.loadEmptyTemplate();
      }
    },

    // 显示模板对话框
    showTemplateDialog() {
      this.loadTemplateList();
      this.templateDialogVisible = true;
    },

    // 加载模板列表
    loadTemplateList() {
      const templates = JSON.parse(
        localStorage.getItem("vform-templates") || "[]"
      );
      this.templateList = templates.sort(
        (a, b) => new Date(b.date) - new Date(a.date)
      );
    },

    // 模板选择改变
    onTemplateChange(templateId) {
      const template = this.templateList.find((t) => t.id === templateId);
      if (template) {
        this.currentTemplateJson = template.json;
      }
    },

    // 加载模板
    loadTemplate() {
      if (this.selectedTemplate && this.currentTemplateJson) {
        try {
          this.$refs.vFormDesigner.setFormJson(this.currentTemplateJson);
          this.$emit("update-json", this.currentTemplateJson);
          this.$message.success("模板加载成功！");
          this.templateDialogVisible = false;
        } catch (error) {
          this.$message.error("模板加载失败：" + error.message);
        }
      }
    },

    // 复制JSON
    async copyJson() {
      if (this.currentTemplateJson) {
        try {
          const jsonString = JSON.stringify(this.currentTemplateJson, null, 2);
          await navigator.clipboard.writeText(jsonString);
          this.$message.success("JSON已复制到剪贴板！");
        } catch (error) {
          // 降级方案：创建临时文本区域
          const textArea = document.createElement("textarea");
          textArea.value = JSON.stringify(this.currentTemplateJson, null, 2);
          document.body.appendChild(textArea);
          textArea.select();
          document.execCommand("copy");
          document.body.removeChild(textArea);
          this.$message.success("JSON已复制到剪贴板！");
        }
      }
    },

    // 删除模板
    deleteTemplate() {
      if (this.selectedTemplate) {
        this.$confirm("确定要删除这个模板吗？", "确认删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let templates = JSON.parse(
              localStorage.getItem("vform-templates") || "[]"
            );
            templates = templates.filter((t) => t.id !== this.selectedTemplate);
            localStorage.setItem("vform-templates", JSON.stringify(templates));

            this.loadTemplateList();
            this.selectedTemplate = null;
            this.currentTemplateJson = null;

            this.$message.success("模板删除成功！");
          })
          .catch(() => {
            this.$message.info("已取消删除");
          });
      }
    },

    // 关闭模板对话框
    closeTemplateDialog() {
      this.selectedTemplate = null;
      this.currentTemplateJson = null;
    },

    // 预览表单
    previewForm() {
      const formJson = this.$refs.vFormDesigner.getFormJson();

      if (
        !formJson ||
        !formJson.widgetList ||
        formJson.widgetList.length === 0
      ) {
        this.$message.warning("请先设计表单内容再预览！");
        return;
      }

      try {
        // 显示预览弹窗
        this.previewFormData = {};
        this.previewDialogVisible = true;
        this.$message.success("正在显示表单预览...");
      } catch (error) {
        this.$message.error("预览失败：" + error.message);
      }
    },

    // 清空设计器
    clearDesigner() {
      this.$refs.vFormDesigner.clearDesigner();
      this.$message.info("设计器已清空");
    },

    // 显示生成页面对话框
    showGenerateDialog() {
      const formJson = this.$refs.vFormDesigner.getFormJson();

      if (
        !formJson ||
        !formJson.widgetList ||
        formJson.widgetList.length === 0
      ) {
        this.$message.warning("请先设计表单内容再生成页面！");
        return;
      }

      this.generateDialogVisible = true;
    },

    // 生成页面
    async generatePage() {
      if (!this.generateForm.routeName || !this.generateForm.pageName) {
        this.$message.warning("请填写路由名和页面名！");
        return;
      }

      try {
        const formJson = this.$refs.vFormDesigner.getFormJson();

        // 获取当前用户信息
        const currentUser = this.getCurrentUser();

        // 生成页面数据
        const pageData = {
          id: Date.now().toString(),
          routeName: this.generateForm.routeName,
          pageName: this.generateForm.pageName,
          description: this.generateForm.description || "",
          creator: currentUser,
          formJson: formJson,
          createTime: new Date().toLocaleString("zh-CN"),
          url: `${window.location.origin}${window.location.pathname}?page=${this.generateForm.routeName}`,
        };

        // 保存到localStorage
        let pages = JSON.parse(
          localStorage.getItem("vform-generated-pages") || "[]"
        );
        pages.push(pageData);
        localStorage.setItem("vform-generated-pages", JSON.stringify(pages));

        // 保存当前页面的JSON数据
        localStorage.setItem(
          `vform-page-${this.generateForm.routeName}`,
          JSON.stringify(pageData)
        );

        this.$message.success(`页面"${this.generateForm.pageName}"生成成功！`);
        this.generateDialogVisible = false;

        // 跳转到页面管理列表页面
        this.$router.push("/pages");
      } catch (error) {
        this.$message.error("生成页面失败：" + error.message);
      }
    },

    // 关闭生成页面对话框
    closeGenerateDialog() {
      this.generateForm = {
        routeName: "",
        pageName: "",
        description: "",
      };
    },

    // 根据模板ID加载模板
    loadTemplateById(templateId) {
      try {
        // 从localStorage获取模板列表
        const templatesJson = localStorage.getItem("vform-templates");
        if (!templatesJson) {
          console.warn("没有找到模板数据，加载空模板");
          this.loadEmptyTemplate();
          return;
        }

        const templates = JSON.parse(templatesJson);
        const template = templates.find((t) => t.id === templateId);

        if (!template) {
          console.warn(`没有找到ID为${templateId}的模板，加载空模板`);
          this.loadEmptyTemplate();
          return;
        }

        // 设置表单JSON到设计器
        if (this.$refs.vFormDesigner && template.formJson) {
          this.$refs.vFormDesigner.setFormJson(template.formJson);

          // 设置编辑模式状态
          this.isEditMode = true;
          this.currentTemplateId = templateId;
          this.currentTemplateName = template.templateName;

          // this.$message.success(`已加载模板: ${template.templateName}`);
        } else {
          console.warn("设计器组件未准备好或模板数据无效，加载空模板");
          this.loadEmptyTemplate();
        }
      } catch (error) {
        console.error("加载模板失败:", error);
        this.$message.error("加载模板失败，将加载空模板");
        this.loadEmptyTemplate();
      }
    },

    // 获取当前表单JSON
    getCurrentFormJson() {
      try {
        return this.$refs.vFormDesigner.getFormJson();
      } catch (error) {
        console.error("获取表单JSON失败:", error);
        return { widgetList: [], formConfig: {} };
      }
    },

    // 关闭预览弹窗
    closePreviewDialog() {
      this.previewDialogVisible = false;
      this.previewFormData = {};
    },

    // 提交预览表单
    submitPreviewForm() {
      // 这里可以添加表单验证和提交逻辑
      // this.$message.info("预览模式下的表单提交功能");

      // 显示表单数据
      const formJson = this.getCurrentFormJson();
      this.$alert(
        `<pre style="max-height: 400px; overflow: auto; text-align: left">${JSON.stringify(
          this.previewFormData,
          null,
          2
        )}</pre>`,
        "预览表单数据",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
        }
      );
    },

    // 隐藏导入/导出按钮
    hideImportExportButtons() {
      let isProcessing = false; // 防止死循环的标志

      const hideButtons = () => {
        if (isProcessing) return; // 如果正在处理，直接返回
        isProcessing = true;

        const designer = this.$refs.vFormDesigner;
        if (!designer || !designer.$el) {
          isProcessing = false;
          return;
        }

        // 在整个VForm2容器中查找所有按钮
        const allButtons = designer.$el.querySelectorAll(
          "button, .el-button, [role='button'], .btn"
        );

        allButtons.forEach((button) => {
          // 如果已经隐藏过，跳过
          if (button.classList.contains("vform-hidden-button")) {
            return;
          }

          const buttonText = (
            button.textContent ||
            button.innerText ||
            ""
          ).trim();
          const buttonTitle = (
            button.title ||
            button.getAttribute("title") ||
            ""
          ).trim();

          // 检查按钮文本或标题是否包含要隐藏的关键词
          const shouldHide =
            buttonText.includes("导入JSON") ||
            buttonText.includes("导出JSON") ||
            buttonText.includes("导出代码") ||
            buttonText.includes("生成SFC") ||
            buttonText.includes("清空设计器") ||
            buttonText.includes("预览表单") ||
            buttonTitle.includes("导入JSON") ||
            buttonTitle.includes("导出JSON") ||
            buttonTitle.includes("导出代码") ||
            buttonTitle.includes("生成SFC") ||
            buttonTitle.includes("清空设计器") ||
            buttonTitle.includes("预览表单");

          if (shouldHide) {
            // 只添加类，不直接修改style，避免触发MutationObserver
            button.classList.add("vform-hidden-button");
          }
        });

        // 查找并隐藏按钮组
        const buttonGroups = designer.$el.querySelectorAll(
          ".el-button-group, .button-group, .btn-group"
        );
        buttonGroups.forEach((group) => {
          // 如果已经隐藏过，跳过
          if (group.classList.contains("vform-hidden-group")) {
            return;
          }

          const groupText = (group.textContent || group.innerText || "").trim();
          if (
            groupText.includes("导入") ||
            groupText.includes("导出") ||
            groupText.includes("清空") ||
            groupText.includes("预览")
          ) {
            group.classList.add("vform-hidden-group");
          }
        });

        // 隐藏right-toolbar-con类
        const rightToolbarCons =
          designer.$el.querySelectorAll(".right-toolbar-con");
        rightToolbarCons.forEach((element) => {
          element.style.display = "none";
          element.classList.add("vform-hidden-group");
        });

        isProcessing = false;
      };

      // 立即执行
      hideButtons();

      // 延迟执行，不使用MutationObserver避免死循环
      setTimeout(hideButtons, 500);
      setTimeout(hideButtons, 1000);
      setTimeout(hideButtons, 2000);
      setTimeout(hideButtons, 3000);
    },
  },
  mounted() {
    // 检查URL参数中是否有templateId和pageId
    const urlParams = new URLSearchParams(window.location.search);
    const templateId = urlParams.get("templateId");
    const pageId = urlParams.get("pageId");

    if (pageId) {
      // 如果有pageId，直接加载页面数据
      this.loadPageById(pageId);
    } else if (templateId) {
      // 如果有templateId，加载对应的模板
      this.loadTemplateById(templateId);
    } else {
      // 都没有则加载空模板
      this.loadEmptyTemplate();
    }

    // 隐藏VForm2设计器中的导入/导出按钮
    this.$nextTick(() => {
      this.hideImportExportButtons();
    });
  },
};
</script>

<style scoped>
.form-designer-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.toolbar {
  padding: 15px 20px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-shrink: 0;
}

.designer-wrapper {
  flex: 1;
  overflow: visible;
  position: relative;
}

.designer-wrapper >>> .v-form-designer {
  height: 100%;
  overflow: visible;
  min-width: 1000px;
}

/* 确保VForm2内部组件不被遮挡 */
.designer-wrapper >>> .form-widget-container {
  overflow: visible !important;
}

.designer-wrapper >>> .widget-form-container {
  overflow: visible !important;
}

.designer-wrapper >>> .widget-config-container {
  overflow: visible !important;
}

/* 修复设计器工具栏高度问题 */
.designer-wrapper >>> .el-tabs__header {
  margin-bottom: 0 !important;
}

.designer-wrapper >>> .el-tabs__content {
  height: calc(100% - 40px) !important;
  overflow: auto !important;
}

/* 只隐藏main-header区域 */
.designer-wrapper >>> .main-header {
  display: none !important;
}

.designer-wrapper >>> .header-main,
.designer-wrapper >>> .main-header-container,
.designer-wrapper >>> .main-header-bar {
  /* display: none !important; */
}

/* 确保设计器主体区域占满空间 */
.designer-wrapper >>> .designer-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 隐藏main-header区域 */
.designer-wrapper >>> .main-header {
  /* display: none !important; */
}

.designer-wrapper >>> .header-main,
.designer-wrapper >>> .main-header-container,
.designer-wrapper >>> .main-header-bar {
  /* display: none !important; */
}

.designer-wrapper >>> .toolbar-header {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* 去掉toolbar-container的float，改用flex布局 */
.designer-wrapper >>> .toolbar-container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  float: none !important;
  width: 100%;
}
.designer-wrapper >>> .toolbar-container .left-toolbar {
  flex: 1;
  display: flex;
}
.designer-wrapper >>> .toolbar-container .right-toolbar .right-toolbar-con {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.designer-wrapper >>> .toolbar-container * {
  float: none !important;
}

/* 确保工具栏内所有元素使用flex布局 */
.designer-wrapper >>> .toolbar-container .el-button-group {
  display: flex !important;
  float: none !important;
}

.designer-wrapper >>> .toolbar-container .el-button {
  float: none !important;
}

/* 确保中间操作区域完全显示 */
.designer-wrapper >>> .widget-form-container {
  overflow: visible !important;
  display: block !important;
}

.designer-wrapper >>> .form-canvas {
  overflow: visible !important;
  display: block !important;
  visibility: visible !important;
}

/* 确保PC/Pad/H5工具栏可见 */
.designer-wrapper >>> .device-toolbar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 50px !important;
}

/* 预览弹窗样式 */
.preview-content {
  max-height: 60vh;
  overflow-y: auto;
}

.preview-form {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 4px;
  min-height: 200px;
}

/* 隐藏VForm2设计器工具栏中的导入/导出按钮 */
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button[title="导入JSON"],
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button[title="导出JSON"],
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button[title="导出代码"],
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button[title="生成SFC"],
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button[title="清空设计器"],
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button[title="预览表单"] {
  display: none !important;
}

/* 更通用的隐藏方法 - 通过按钮文本内容 */
.designer-wrapper >>> .v-form-designer * {
  /* 隐藏包含特定文本的按钮 */
}

.designer-wrapper >>> .v-form-designer button:contains("导入JSON"),
.designer-wrapper >>> .v-form-designer button:contains("导出JSON"),
.designer-wrapper >>> .v-form-designer button:contains("导出代码"),
.designer-wrapper >>> .v-form-designer button:contains("生成SFC"),
.designer-wrapper >>> .v-form-designer button:contains("清空设计器"),
.designer-wrapper >>> .v-form-designer button:contains("预览表单"),
.designer-wrapper >>> .v-form-designer .el-button:contains("导入JSON"),
.designer-wrapper >>> .v-form-designer .el-button:contains("导出JSON"),
.designer-wrapper >>> .v-form-designer .el-button:contains("导出代码"),
.designer-wrapper >>> .v-form-designer .el-button:contains("生成SFC"),
.designer-wrapper >>> .v-form-designer .el-button:contains("清空设计器"),
.designer-wrapper >>> .v-form-designer .el-button:contains("预览表单") {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* 通过按钮组隐藏 */
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button-group:nth-of-type(2) {
  display: none !important;
}

/* 通过按钮文本内容隐藏 */
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button
  span:contains("导入JSON"),
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button
  span:contains("导出JSON"),
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button
  span:contains("导出代码"),
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button
  span:contains("生成SFC"),
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button
  span:contains("清空设计器"),
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button
  span:contains("预览表单") {
  display: none !important;
}

/* 隐藏包含特定文本的按钮 */
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button:has(span:contains("导入JSON")),
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button:has(span:contains("导出JSON")),
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button:has(span:contains("导出代码")),
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button:has(span:contains("生成SFC")),
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button:has(span:contains("清空设计器")),
.designer-wrapper
  >>> .v-form-designer
  .toolbar-container
  .el-button:has(span:contains("预览表单")) {
  display: none !important;
}

/* 通过JavaScript添加的隐藏类 */
.vform-hidden-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

.vform-hidden-group {
  display: none !important;
}

/* 确保隐藏的按钮完全不可见 */
.designer-wrapper >>> .vform-hidden-button,
.designer-wrapper >>> .vform-hidden-group {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* 隐藏right-toolbar-con类 */
.designer-wrapper >>> .right-toolbar-con {
  display: none !important;
}

.designer-wrapper >>> .v-form-designer .right-toolbar-con {
  display: none !important;
}
</style>
